<template>
  <!-- 名片风采 -->
  <view class="elegant-demeanour">
    <CardComHeader v-if="isEdit" :title="typeText" edit-button-text="管理图片" @change="edit" />
    <view v-if="isEdit || getBanners?.length" class="cover" @click="preview">
      <swiper
        indicator-dots
        autoplay
        circular
        class="swiper-container"
        indicator-color="rgba(255, 255,255, .3)"
        indicator-active-color="#ffffff"
      >
        <template v-for="(v, i) in getBanners" :key="i">
          <swiper-item>
            <TImage :src="v" width="calc(750rpx - 60rpx)" height="385rpx" />
          </swiper-item>
        </template>
        <swiper-item v-if="!getBanners?.length">
          <TImage src="" width="calc(750rpx - 60rpx)" height="385rpx" />
        </swiper-item>
      </swiper>
      <view class="photo-num">
        <view class="ali-icon prefix-icon">&#xe8ba;</view>
        <text class="photo-num-text">{{ modelValue?.length ?? 0 }}&nbsp;张</text>
        <view class="ali-icon suffix-icon">&#xe6c7;</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ApplyTypeEnum } from '@/enums/membershipEnum';
  import { propTypes } from '@/utils/propTypes';
  import { computed, type PropType } from 'vue';
  import Dictionary from '@/utils/dictionary';
  import TImage from '@/components/TImage/index.vue';
  import CardComHeader from '../cardComHeader/index.vue';
  import { navigateTo } from '@/router';

  const props = defineProps({
    modelValue: Array as PropType<string[]>,
    /** 是否为编辑模式 */
    isEdit: propTypes.bool.def(false),
    /** 名片类型 */
    cardType: Number as PropType<ApplyTypeEnum>,
    /** banner 显示多少张 */
    showNum: propTypes.number.def(8),
  });

  const getBanners = computed(() => {
    return props.modelValue?.slice(0, props.showNum);
  });

  const emit = defineEmits(['update:modelValue']);

  const typeText = computed(() => {
    const types = Dictionary.getLocal('memberType');
    const text = types.find((v) => v.dictValue === props.cardType)?.dictLabel ?? '';
    return `${text}风采`;
  });

  function edit() {
    const { modelValue, cardType } = props;
    if (modelValue && cardType) {
      navigateTo({
        name: 'elegantDemeanourManage',
        options: {
          imgList: modelValue,
          applyType: cardType,
          isEdit: true,
          showNum: props.showNum,
          callback: (imgList) => {
            emit('update:modelValue', imgList);
          },
        },
      });
    }
  }

  function preview() {
    const { modelValue, cardType } = props;
    if (modelValue && cardType) {
      navigateTo({
        name: 'elegantDemeanourManage',
        options: {
          imgList: modelValue,
          applyType: cardType,
          isEdit: false,
        },
      });
    }
  }
</script>

<style lang="scss" scoped>
  .elegant-demeanour {
    .cover {
      width: 100%;
      height: 385rpx;
      border-radius: 10rpx;
      overflow: hidden;
      position: relative;
      .photo-num {
        position: absolute;
        right: 0;
        bottom: 30rpx;
        height: 58rpx;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 10rpx 0rpx 0rpx 10rpx;
        display: flex;
        align-items: center;
        padding: 0 30rpx 0 20rpx;
        font-size: 23rpx;
        color: #fff;
        &-text {
          margin: 0 4rpx;
        }
      }
    }

    .swiper-container {
      height: inherit;
      border-radius: 10rpx;
      overflow: hidden;
    }
  }
</style>
